<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" >
<script src="jquery-1.8.0.min.js"> </script>
<script>
(function($){
    var selectC = function(ele, opt){
        this.$element = ele;
        var  defaults = {
            type : 1,   //1为pc端,其他为mobile端
            debug: 1,   //1为开启debug
            dataFun: function(data){console.log(data)}  //获取数据后处理函数
        };
        this.options = $.extend({}, defaults, opt);
        this.data    = this.options.data;
    };
    selectC.prototype = {
        run : function(){
            if(this.options['type'] == 3){
                this.adminRun();return;
            }
            if(this.options['type'] == 1){
                this.pcRun();
            }else{
                this.mobileRun();
            }
        },
        pcRun: function(){            
            var str ='<div  class="imitatbox" ><div class="imitation"></div><ul class="imitatboxli"><li class="imitatli" style="position:relative;"> <div class="seclectbtn">确定</div> <div  contenteditable="true"   class="imitatlisec">百联集团</div>  <ul class="imitatliul" >';
            for(var i=0; i< this.data.length; i++){
                if(!$.isEmptyObject(this.data[i])){
                    str += '<li><div class="imitatliulsec">'+ this.data[i].name +'</div>';
                    var subData = this.data[i].sub;
                    if($.isArray(subData)){
                        str += '<ul class="imitatliulli">';
                            for(var j=0; j<subData.length; j++){
                                str += '<li>' + subData[j].name + '</li>';
                            }
                        str += '</ul>';
                    }
                    str += '</li>';
                }
            }
            str += '</ul></li></ul></div>';
            this.$element.html(str);
            this.$element.append('<input type="hidden" id="field8" name="field8">');
            var jq = $;
            jq(document).on('click','.imitation',function(){
            	if(jq(this).hasClass('on')){
            		jq(this).removeClass('on').parent().find('.imitatboxli').hide();
            	}else{
            		jq(this).addClass('on').parent().find('.imitatboxli').show();
            		jq('.seclectbtn').show();
            	}
            }).on('click','.imitatlisec',function(){
            	if(jq(this).hasClass('on')){
            		jq(this).removeClass('on').parent().find('.imitatliul').hide();
            		jq('.imitation').text(jq(this).text());
                    jq('#field8').val(jq(this).text());
            	}else{
            		jq(this).addClass('on').parent().find('.imitatliul').show();
            		jq('.imitation').text(jq(this).text());
                    jq('#field8').val(jq(this).text());
            	}
            }).on('click','.imitatliulsec',function(){
            	if(!jq(this).hasClass('on')){
            		jq('.imitatliulsec').removeClass('on');
            		jq('.imitatliulli').hide();
            		jq(this).addClass('on').parent().find('.imitatliulli').show();
            		jq('.imitation').text(jq(this).text());
                    jq('#field8').val(jq(this).text());
            	}else{
            		jq(this).removeClass('on').parent().find('.imitatliulli').hide();
            		jq('.imitation').text(jq(this).text());
                    jq('#field8').val(jq(this).text());
            	}
            }).on('click','.imitatliulli li',function(){
            	jq('.imitation').text(jq(this).text());
                jq('#field8').val(jq(this).text());
            }).on('click','.seclectbtn',function(){    
                jq('.imitatboxli').hide();
            	jq('.imitatliulsec,.imitation').removeClass('on');
            	jq('.imitatliulli').hide();
            	jq('.seclectbtn').hide();
            })
        },
        mobileRun: function(){
            var str = '<option value="百联集团">百联集团 </option>';
            for(var i=0; i< this.data.length; i++){
                if(!$.isEmptyObject(this.data[i])){
                    str += '<option value="'+ this.data[i].name +'">'+ this.data[i].name +' </option>';
                    var subData = this.data[i].sub;
                    if($.isArray(subData)){
                        for(var j=0; j<subData.length; j++){
                            str += '<option value="' + subData[j].name + '">' + subData[j].name + ' </option>';
                        }
                    }
                }
            }
            str += '</ul></li></ul></div>';
            this.$element.html(str);
        },
        adminRun: function(){
            var str ='<ul class="header">';
            for(var i=0; i< this.data.length; i++){
                if(!$.isEmptyObject(this.data[i])){
                    str += '<li><span contenteditable="true" >'+ this.data[i].name +'</span><button class="add">add</button><button class="delete">delete</button>';
                    var subData = this.data[i].sub;
                    if($.isArray(subData)){
                        str += '<ul>';
                            for(var j=0; j<subData.length; j++){
                                str += '<li><span  contenteditable="true" >' + subData[j].name + '</span><button class="add">add</button><button class="delete">delete</button>';
                            }
                        str += '</ul>';
                    }
                    str += '</li>';
                }
            }
            str += '</ul>';
            str += '<button id="saveData">保存数据</button>';
            this.$element.html(str);
            this.editBind();
            var me = this;
            $('#saveData').click(function(){
                if(me.options.debug){
                    console.log(me.getData());
                }
                me.options.dataFun(me.getData());
            })
        },
        getData: function(){
            var data = [];
            this.$element.find('ul[class=header]>li').each(function(){
                var temp = [];
                $(this).find('ul>li').each(function(){
                    temp.push({'name':$(this).find('span:first').text()});
                })
                data.push({name: $(this).find('span:first').text(), sub:temp});
            })
            return data;
        },
        editBind: function(){
            var me = this;
            this.$element.find('.add').click(function(event){
                event.stopImmediatePropagation();
                if($(this).parent().find('ul').length>0){
                    $(this).parent().after('<li><span contenteditable="true" >一级目录</span><button class="add">add</button><button class="delete">delete</button><ul><li><span contenteditable="true" >二级目录</span><button class="add">add</button><button class="delete">delete</button></li></ul></li>')
                }else{
                    $(this).parent().after('<li><span contenteditable="true" >二级目录</span><button class="add">add</button><button class="delete">delete</button></li>');
                }
                me.editBind();
            });
            this.$element.find('.delete').click(function(event){
                event.stopImmediatePropagation();
                if(confirm('确认要删除此分类吗(删除后不可回复)')){
                    $(this).parent().remove();
                }                
            })
        }
        
    };

    $.fn.selectCompany = function(options){
        var  sc = new selectC(this, options);
        return sc.run();
    }
})(jQuery)
</script>
</head>
<body>
<div id="test"></div>
<div id="test2"></div>
<script>

var data = [
                {
                    'name' : '联华超市股份有限公司',
                    'sub'  : [
                        { 'name':'联华超市（华联超市）'},
                        { 'name':'世纪联华'},
                        { 'name':'华联吉买盛'},
                        { 'name':'快客便利'},
                        { 'name':'浙江联华'},
                        { 'name':'江苏联华'},
                        { 'name':'广西联华'}
                    ]
                },
                {
                    'name' : '上海百联集团股份有限公司',
                    'sub'  : [
                        { 'name':'上海第一八佰伴有限公司'},
                        { 'name':'上海市第一百货商店'},
                        { 'name':'上海东方商厦'},
                        { 'name':'上海百联南方购物中心'},
                        { 'name':'上海百联西郊购物中心'},
                        { 'name':'上海百联世茂国际购物广场'},
                        { 'name':'上海百联中环购物广场'},
                        { 'name':'上海又一城购物中心'},
                        { 'name':'上海世博源购物中心'},
                        { 'name':'重庆百联购物中心'},
                        { 'name':'上海百联南桥购物中心'},
                        { 'name':'沈阳百联购物中心'},
                        { 'name':'上海虹桥友谊商城'},
                        { 'name':'上海东方商厦南东店'},
                        { 'name':'上海永安百货'},
                        { 'name':'上海新华联大厦'},
                        { 'name':'上海百联金山购物中心'},
                        { 'name':'上海杨浦东方商厦'},
                        { 'name':'上海百联奥特莱斯直销广场'},
                        { 'name':'杭州百联奥特莱斯直销广场'},
                        { 'name':'武汉百联奥特莱斯直销广场'},
                        { 'name':'无锡百联奥特莱斯直销广场'},
                        { 'name':'南京百联奥特莱斯直销广场'},
                        { 'name':'长沙百联东方商厦'},
                        { 'name':'上海友谊商城'},
                        { 'name':'上海时装商店'},
                        { 'name':'上海妇女用品商店'},
                        { 'name':'上海华联商厦'},
                        { 'name':'上海友谊商店'},
                        { 'name':'上海百联东郊购物中心'},
                        { 'name':'上海百联徐汇购物广场有限公司'},
                        { 'name':'上海青浦百联东方商厦'},
                        { 'name':'宁波百联东方商厦'},
                        { 'name':'上海嘉定百联东方商厦'},
                        { 'name':'上海浦东华联购物中心'},
                        { 'name':'上海第一百货松江店'},
                        { 'name':'上海东方商厦西郊店'},
                        { 'name':'上海普陀华联商厦'},
                        { 'name':'上海浦东永安珠宝'},
                        { 'name':'上海百联崇明新城购物中心'}
                    ]
                },
                {
                    'name' : '上海物资贸易股份有限公司',
                    'sub'  : [
                        { 'name':'上海物贸黑色金属分公司'},
                        { 'name':'上海物贸有色金属分公司'},
                        { 'name':'上海百联汽车贸易有限公司'},
                        { 'name':'上海二手车交易市场有限公司'},
                        { 'name':'上海有色金属交易中心'},
                        { 'name':'上海燃料有限公司'},
                        { 'name':'上海晶通化学品有限公司'},
                        { 'name':'上海物资进出口有限公司'},
                        { 'name':'上海乾通投资发展有限公司'},
                        { 'name':'上海爱姆意机电设备连锁有限公司'},
                        { 'name':'上海森联木业发展有限公司'},
                        { 'name':'上海动力燃料有限公司'},
                        { 'name':'上海国际商品拍卖行'}
                    ]
                },
                {
                    'name' : '百联电子商务有限公司',
                    'sub'  : [
                        { 'name':'百联E城'}
                    ]
                },
                {
                    'name' : '上海现代物流投资发展有限公司',
                    'sub'  : [
                        { 'name':'上海商业储运有限公司'},
                        { 'name':'上海长桥物流有限公司'},
                        { 'name':'上海百联配送实业有限公司'},
                        { 'name':'上海晶通化轻发展有限公司'},
                        { 'name':'上海宝联五金储运有限公司'},
                        { 'name':'上海森大木业有限公司'}
                    ]
                },
                {
                    'name' : '百联集团置业有限公司',
                    'sub'  : [
                        { 'name':'上海百联房地产经营管理有限公司'},
                        { 'name':'上海百联物业管理有限公司'},
                        { 'name':'上海百联保安公司'},
                        { 'name':'上海河岸商业开发有限公司'},
                        { 'name':'上海濠泉房地产有限公司'},
                        { 'name':'上海文化商厦'}
                    ]
                },
                {
                    'name' : '上海百联集团资产经营管理有限公司',
                    'sub'  : [
                        { 'name':'上海百红商业贸易有限公司'},
                        { 'name':'上海华联典当行有限公司'},
                        { 'name':'上海外轮供应有限公司'},
                        { 'name':'上海拍卖行有限责任公司'},
                        { 'name':'上海迎宾出租汽车有限公司'},
                        { 'name':'上海一百国际贸易有限公司'},
                        { 'name':'上海百联电器科技服务有限公司'},
                        { 'name':'上海华联资产托管有限公司'}
                    ]
                },
                {
                    'name' : '上海市商业投资（集团）有限公司',
                    'sub'  : [
                        { 'name':'上海商投创业投资有限公司'},
                        { 'name':'上海商投实业投资控股有限公司'},
                        { 'name':'上海商务中心股份有限公司'},
                        { 'name':'上海复旦科技产业控股有限公司'},
                        { 'name':'上海复旦微电子集团股份有限公司'},
                        { 'name':'上海复旦数字医疗科技有限公司'}
                    ]
                },
                {
                    'name' : '上海新路达商业（集团）有限公司',
                    'sub'  : [
                        { 'name':'好美家装潢建材有限公司'},
                        { 'name':'上海第一医药股份有限公司'},
                        { 'name':'上海新路达集团食品经营分公司'},
                        { 'name':'上海新路达集团百货经营分公司'},
                        { 'name':'上海新路达集团资产管理分公司'},
                        { 'name':'上海新路达集团商业网点经营分公司'}
                    ]
                },
                {
                    'name' : '上海三联（集团）有限公司',
                    'sub'  : [
                        { 'name':'上海三联集团亨得利钟表有限公司'},
                        { 'name':'上海三联集团亨达利钟表有限公司'},
                        { 'name':'上海三联集团茂昌眼镜有限公司'},
                        { 'name':'上海三联集团吴良材眼镜有限公司'},
                        { 'name':'上海三联集团冠龙照相器材有'}
                    ]
                },
                {
                    'name' : '百联集团人力资源管理、企业清理中心',
                    'sub'  : [
                        { 'name':'百联集团人力资源管理、企业清理中心'}
                    ]
                },
                {
                    'name' : '百联集团教培中心（党校）',
                    'sub'  : [
                        { 'name':'上海市现代流通学校'}
                    ]
                },
                {
                    'name' : '百联集团审计中心',
                    'sub'  : [
                        { 'name':'百联集团审计中心'}
                    ]
                }
            ];
 
 
 console.log(JSON.stringify({'data':data}));
 
            
//$('#test').selectCompany({type:3, data:data, dataFun: function(data){
    
//}});

</script>




</body>
</html>